博客标签页展开[Hexo]

1，效果

找到博客主题下的categories.pug, 替换代码

1
2
3
#tag
  .category-lists#tag-cloud-list!= tags_page_list(#tag
  .category-lists#tag-cloud-list!= tags_page_list("categories")

找到博客主题下的tags.pug, 替换代码

1
2
3
4
5
.tag-cloud-list.is-center
  #tag
    #tag-cloud-list
      !=tags_page_list(.tag-cloud-list.is-center
  #tag
    #tag-cloud-list
      !=tags_page_list("tags")

找到博客主题下的tag_page.styl, 替换代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303

#tag #tag-page-tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  z-index: 1;
  left: 0;
  top: 3;
  max-height: 44px;
  overflow: hidden;
  background: var(--heo-card-bg);
  backdrop-filter: saturate(180%) blur(20px);
  transition: 0.3s ease-out;
  border-radius: 12px;
  border: var(--style-border-always);
}

/* 鼠标悬停时展开 */
#tag #tag-page-tags:hover {
  max-height: 500px;
}

#tag #tag-page-tags a {
  line-height: 1.6;
  display: flex;
  align-items: center;
  color: var(--anzhiyu-fontcolor) !important;
  padding: 0.1rem 0.5rem;
  margin: 0.25rem;
  border-radius: 8px;
  border: var(--style-border-always);
  order: 2; /* 默认所有标签的 order 值为 2 */
}

/* 选中的标签放在第一位 */
#tag #tag-page-tags a.selected {
  box-shadow: var(--anzhiyu-shadow-theme);
  color: var(--anzhiyu-white) !important;
  background: var(--anzhiyu-theme);
  border: var(--style-border-none);
  order: 1; /* 选中的标签 order 值为 1，排在第一位 */
}

#tag #tag-page-tags a.select .tagsPageCount {
  background: var(--anzhiyu-card-bg);
  color: var(--anzhiyu-lighttext);
}

#post .tag_share .post-meta__box__tags span.tagsPageCount,
#tag-page-tags .tagsPageCount 
  padding: 4px 6px
  background: var(--anzhiyu-secondbg)
  border: var(--style-border-always)
  min-width: 22.5px
  display: inline-block
  border-radius: 4px
  line-height: 0.6rem
  text-align: center
  font-size: 0.7rem
  color: var(--anzhiyu-fontcolor)
  margin-left: 4px

#tag #tag-page-tags a:hover .tagsPageCount,
#post .tag_share .post-meta__box__tags:hover span.tagsPageCount 
  background: var(--anzhiyu-card-bg)
  color: var(--anzhiyu-lighttext)

#tag #tag-page-tags a 
  font-family: $font-family
  font-size: 1.1em

#tag #tag-page-tags a:hover 
  box-shadow: var(--anzhiyu-shadow-theme)
  color: var(--anzhiyu-white) !important
  background: var(--anzhiyu-theme)
  border: var(--style-border-none)

span.tags-punctuation,
span.categoryes-punctuation 
  margin-right: 4px

span.tags-punctuation .icon-biaoqian,
span.categoryes-punctuation .icon-biaoqian 
  font-size: 13px

.tagsPageCount 
  font-family: $font-family

[data-theme="light"] #post .tag_share .post-meta__box__tags span.tagsPageCount 
  background-color: transparent
  color: white

[data-theme="light"] #post .tag_share .post-meta__box__categoryes span.categoryesPageCount 
  background-color: transparent
  color: white

#post .tag_share .post-meta__box__categoryes span.categoryesPageCount 
  padding: 4px 6px
  background: var(--anzhiyu-secondbg)
  border: var(--style-border-always)
  min-width: 22.5px
  display: inline-block
  border-radius: 4px
  line-height: 0.6rem
  text-align: center
  font-size: 0.7rem
  color: var(--anzhiyu-fontcolor)
  margin-left: 4px

.post-meta__box__categories 
  border-radius: 12px

/* 文章彩色标签 */
/*文章随机彩色标签*/
.post-meta__box a 
  color: var(--anzhiyu-white)
  border: none

[data-theme="dark"] .post-meta__box a 
  opacity: 0.5

[data-theme="dark"] .post-reward .reward-button,
[data-theme="dark"] .reward-link.mode 
  opacity: 0.5

.post-meta__box__tag-list a:nth-child(5n) 
  background-color: #4a4a4a
  color: #fff

.post-meta__box__tag-list a:nth-child(5n + 1) 
  background-color: #ff5e5c
  color: #fff

.post-meta__box__tag-list a:nth-child(5n + 2)
  background-color: #ffbb50
  color: #fff

.post-meta__box__tag-list a:nth-child(5n + 3)
  background-color: #1ac756
  color: #fff

.post-meta__box__tag-list a:nth-child(5n + 4)
  background-color: #19b5fe
  color: #fff

.post-meta__box__tag-list a:hover
  background-color: var(--anzhiyu-main)
  color: #fff
[data-theme="dark"] .post-meta__box__tag-list a:hover
  color: #fff
/* 文章分类颜色背景 */
.post-meta__box__category-list a:nth-child(5n)
  background-color: #4a4a4a
  color: #fff

.post-meta__box__category-list a:nth-child(5n + 1)
  background-color: #1ac756
  color: #fff

.post-meta__box__category-list a:nth-child(5n + 2)
  background-color: #ffbb50
  color: #fff

.post-meta__box__category-list a:nth-child(5n + 3)
  background-color: #19b5fe
  color: #fff

.post-meta__box__category-list a:nth-child(5n + 4)
  background-color: #ff5e5c
  color: #fff



body[data-type="tags"],body[data-type="categories"]
  #page
    border-radius: 12px
    +maxWidth768()
      #tag
        padding: 0px 15px 20px
      .page-title 
        margin: 8px 0 0px
  +maxWidth768()
    #body-wrap .layout
      padding: 0 20px 15px
  #tag #tag-page-tags
    justify-content: center;
    a
      font-size: 1.4rem;
      margin: 0.3rem 0.65rem;
      +maxWidth768()
        font-size: 1.8rem;
        margin: 0.6rem 0.8rem;

/* 标签分类页面 */
#tag #tag-cloud-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  z-index: 1;
  left: 0;
  top: 3;
  max-height: 1144px;
  overflow: hidden;
  background: var(--heo-card-bg);
  backdrop-filter: saturate(180%) blur(30px); /* 增加背景模糊程度 */
  transition: 0.3s ease-out;
  border-radius: 16px; /* 圆角 */
  border: var(--style-border-always);
  padding: 1rem; /* 内边距 */
  margin: 1rem 0; /* 外边距 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
}

/* 标签项样式 */
#tag #tag-cloud-list a {
  line-height: 1.6;
  display: flex;
  align-items: center;
  color: var(--anzhiyu-fontcolor) !important;
  padding: 0.25rem 1rem; /* 增加内边距 */
  margin: 0.5rem; /* 标签之间的间距 */
  border-radius: 12px; /* 圆角 */
  border: var(--style-border-always);
  order: 2; /* 默认所有标签的 order 值为 2 */
  transition: all 0.3s ease; /* 增加平滑过渡 */
  font-family: $font-family;
  font-size: 1.2em; /* 增大字体 */
  cursor: pointer; /* 鼠标悬停时显示为指针 */
  background: var(--anzhiyu-card-bg); /* 默认背景 */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* 默认阴影 */
}

/* 选中的标签放在第一位 */
#tag #tag-cloud-list a.selected {
  box-shadow: var(--anzhiyu-shadow-theme);
  color: var(--anzhiyu-white) !important;
  background: var(--anzhiyu-theme);
  border: var(--style-border-none);
  order: 1; /* 选中的标签排在第一位 */
  transform: scale(1.05); /* 选中标签轻微放大 */
}

/* 标签页计数样式 */
#tag #tag-cloud-list a.select .tagsPageCount {
  background: var(--anzhiyu-card-bg);
  color: var(--anzhiyu-lighttext);
}

/* 标签计数器样式 */
#post .tag_share .post-meta__box__tags span.tagsPageCount,
#tag-cloud-list .tagsPageCount {
  padding: 6px 8px; /* 增加标签计数器内边距 */
  background: var(--anzhiyu-secondbg);
  border: var(--style-border-always);
  min-width: 30px; /* 增加最小宽度 */
  display: inline-block;
  border-radius: 6px; /* 圆角调整 */
  line-height: 1rem; /* 增加高度 */
  text-align: center;
  font-size: 0.8rem; /* 增加字体大小 */
  color: var(--anzhiyu-fontcolor);
  margin-left: 6px; /* 增加左边距 */
  transition: all 0.3s ease; /* 平滑过渡 */
}

/* 标签计数器 hover 样式 */
#tag #tag-cloud-list a:hover .tagsPageCount,
#post .tag_share .post-meta__box__tags:hover span.tagsPageCount {
  background: var(--anzhiyu-card-bg);
  color: var(--anzhiyu-lighttext);
}

/* 标签项 hover 样式 */
#tag #tag-cloud-list a:hover {
  box-shadow: var(--anzhiyu-shadow-theme);
  color: var(--anzhiyu-white) !important;
  background: var(--anzhiyu-theme);
  border: var(--style-border-none);
  transform: scale(1.05); /* hover 时标签轻微放大 */
}

/* 标签字体样式 */
#tag #tag-cloud-list a {
  font-family: $font-family;
  font-size: 1.2em; /* 增大字体 */
}

/* 标签的悬停效果（增加轻微放大和阴影） */
#tag #tag-cloud-list a:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 加强阴影 */
  transform: scale(1.1); /* 放大效果 */
  background: var(--anzhiyu-theme);
  color: var(--anzhiyu-white);
  border: var(--style-border-none); /* 去掉边框 */
}

/* 背景模糊度 */

#tag #tag-page-tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  z-index: 1;
  left: 0;
  top: 3;
  max-height: 44px;
  overflow: hidden;
  background: var(--heo-card-bg);
  backdrop-filter: saturate(180%) blur(20px);
  transition: 0.3s ease-out;
  border-radius: 12px;
  border: var(--style-border-always);
}

/* 鼠标悬停时展开 */
#tag #tag-page-tags:hover {
  max-height: 500px;
}

#tag #tag-page-tags a {
  line-height: 1.6;
  display: flex;
  align-items: center;
  color: var(--anzhiyu-fontcolor) !important;
  padding: 0.1rem 0.5rem;
  margin: 0.25rem;
  border-radius: 8px;
  border: var(--style-border-always);
  order: 2; /* 默认所有标签的 order 值为 2 */
}

/* 选中的标签放在第一位 */
#tag #tag-page-tags a.selected {
  box-shadow: var(--anzhiyu-shadow-theme);
  color: var(--anzhiyu-white) !important;
  background: var(--anzhiyu-theme);
  border: var(--style-border-none);
  order: 1; /* 选中的标签 order 值为 1，排在第一位 */
}

#tag #tag-page-tags a.select .tagsPageCount {
  background: var(--anzhiyu-card-bg);
  color: var(--anzhiyu-lighttext);
}

#post .tag_share .post-meta__box__tags span.tagsPageCount,
#tag-page-tags .tagsPageCount 
  padding: 4px 6px
  background: var(--anzhiyu-secondbg)
  border: var(--style-border-always)
  min-width: 22.5px
  display: inline-block
  border-radius: 4px
  line-height: 0.6rem
  text-align: center
  font-size: 0.7rem
  color: var(--anzhiyu-fontcolor)
  margin-left: 4px

#tag #tag-page-tags a:hover .tagsPageCount,
#post .tag_share .post-meta__box__tags:hover span.tagsPageCount 
  background: var(--anzhiyu-card-bg)
  color: var(--anzhiyu-lighttext)

#tag #tag-page-tags a 
  font-family: $font-family
  font-size: 1.1em

#tag #tag-page-tags a:hover 
  box-shadow: var(--anzhiyu-shadow-theme)
  color: var(--anzhiyu-white) !important
  background: var(--anzhiyu-theme)
  border: var(--style-border-none)

span.tags-punctuation,
span.categoryes-punctuation 
  margin-right: 4px

span.tags-punctuation .icon-biaoqian,
span.categoryes-punctuation .icon-biaoqian 
  font-size: 13px

.tagsPageCount 
  font-family: $font-family

[data-theme="light"] #post .tag_share .post-meta__box__tags span.tagsPageCount 
  background-color: transparent
  color: white

[data-theme="light"] #post .tag_share .post-meta__box__categoryes span.categoryesPageCount 
  background-color: transparent
  color: white

#post .tag_share .post-meta__box__categoryes span.categoryesPageCount 
  padding: 4px 6px
  background: var(--anzhiyu-secondbg)
  border: var(--style-border-always)
  min-width: 22.5px
  display: inline-block
  border-radius: 4px
  line-height: 0.6rem
  text-align: center
  font-size: 0.7rem
  color: var(--anzhiyu-fontcolor)
  margin-left: 4px

.post-meta__box__categories 
  border-radius: 12px

/* 文章彩色标签 */
/*文章随机彩色标签*/
.post-meta__box a 
  color: var(--anzhiyu-white)
  border: none

[data-theme="dark"] .post-meta__box a 
  opacity: 0.5

[data-theme="dark"] .post-reward .reward-button,
[data-theme="dark"] .reward-link.mode 
  opacity: 0.5

.post-meta__box__tag-list a:nth-child(5n) 
  background-color: #4a4a4a
  color: #fff

.post-meta__box__tag-list a:nth-child(5n + 1) 
  background-color: #ff5e5c
  color: #fff

.post-meta__box__tag-list a:nth-child(5n + 2)
  background-color: #ffbb50
  color: #fff

.post-meta__box__tag-list a:nth-child(5n + 3)
  background-color: #1ac756
  color: #fff

.post-meta__box__tag-list a:nth-child(5n + 4)
  background-color: #19b5fe
  color: #fff

.post-meta__box__tag-list a:hover
  background-color: var(--anzhiyu-main)
  color: #fff
[data-theme="dark"] .post-meta__box__tag-list a:hover
  color: #fff
/* 文章分类颜色背景 */
.post-meta__box__category-list a:nth-child(5n)
  background-color: #4a4a4a
  color: #fff

.post-meta__box__category-list a:nth-child(5n + 1)
  background-color: #1ac756
  color: #fff

.post-meta__box__category-list a:nth-child(5n + 2)
  background-color: #ffbb50
  color: #fff

.post-meta__box__category-list a:nth-child(5n + 3)
  background-color: #19b5fe
  color: #fff

.post-meta__box__category-list a:nth-child(5n + 4)
  background-color: #ff5e5c
  color: #fff



body[data-type="tags"],body[data-type="categories"]
  #page
    border-radius: 12px
    +maxWidth768()
      #tag
        padding: 0px 15px 20px
      .page-title 
        margin: 8px 0 0px
  +maxWidth768()
    #body-wrap .layout
      padding: 0 20px 15px
  #tag #tag-page-tags
    justify-content: center;
    a
      font-size: 1.4rem;
      margin: 0.3rem 0.65rem;
      +maxWidth768()
        font-size: 1.8rem;
        margin: 0.6rem 0.8rem;

/* 标签分类页面 */
#tag #tag-cloud-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  z-index: 1;
  left: 0;
  top: 3;
  max-height: 1144px;
  overflow: hidden;
  background: var(--heo-card-bg);
  backdrop-filter: saturate(180%) blur(30px); /* 增加背景模糊程度 */
  transition: 0.3s ease-out;
  border-radius: 16px; /* 圆角 */
  border: var(--style-border-always);
  padding: 1rem; /* 内边距 */
  margin: 1rem 0; /* 外边距 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
}

/* 标签项样式 */
#tag #tag-cloud-list a {
  line-height: 1.6;
  display: flex;
  align-items: center;
  color: var(--anzhiyu-fontcolor) !important;
  padding: 0.25rem 1rem; /* 增加内边距 */
  margin: 0.5rem; /* 标签之间的间距 */
  border-radius: 12px; /* 圆角 */
  border: var(--style-border-always);
  order: 2; /* 默认所有标签的 order 值为 2 */
  transition: all 0.3s ease; /* 增加平滑过渡 */
  font-family: $font-family;
  font-size: 1.2em; /* 增大字体 */
  cursor: pointer; /* 鼠标悬停时显示为指针 */
  background: var(--anzhiyu-card-bg); /* 默认背景 */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* 默认阴影 */
}

/* 选中的标签放在第一位 */
#tag #tag-cloud-list a.selected {
  box-shadow: var(--anzhiyu-shadow-theme);
  color: var(--anzhiyu-white) !important;
  background: var(--anzhiyu-theme);
  border: var(--style-border-none);
  order: 1; /* 选中的标签排在第一位 */
  transform: scale(1.05); /* 选中标签轻微放大 */
}

/* 标签页计数样式 */
#tag #tag-cloud-list a.select .tagsPageCount {
  background: var(--anzhiyu-card-bg);
  color: var(--anzhiyu-lighttext);
}

/* 标签计数器样式 */
#post .tag_share .post-meta__box__tags span.tagsPageCount,
#tag-cloud-list .tagsPageCount {
  padding: 6px 8px; /* 增加标签计数器内边距 */
  background: var(--anzhiyu-secondbg);
  border: var(--style-border-always);
  min-width: 30px; /* 增加最小宽度 */
  display: inline-block;
  border-radius: 6px; /* 圆角调整 */
  line-height: 1rem; /* 增加高度 */
  text-align: center;
  font-size: 0.8rem; /* 增加字体大小 */
  color: var(--anzhiyu-fontcolor);
  margin-left: 6px; /* 增加左边距 */
  transition: all 0.3s ease; /* 平滑过渡 */
}

/* 标签计数器 hover 样式 */
#tag #tag-cloud-list a:hover .tagsPageCount,
#post .tag_share .post-meta__box__tags:hover span.tagsPageCount {
  background: var(--anzhiyu-card-bg);
  color: var(--anzhiyu-lighttext);
}

/* 标签项 hover 样式 */
#tag #tag-cloud-list a:hover {
  box-shadow: var(--anzhiyu-shadow-theme);
  color: var(--anzhiyu-white) !important;
  background: var(--anzhiyu-theme);
  border: var(--style-border-none);
  transform: scale(1.05); /* hover 时标签轻微放大 */
}

/* 标签字体样式 */
#tag #tag-cloud-list a {
  font-family: $font-family;
  font-size: 1.2em; /* 增大字体 */
}

/* 标签的悬停效果（增加轻微放大和阴影） */
#tag #tag-cloud-list a:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 加强阴影 */
  transform: scale(1.1); /* 放大效果 */
  background: var(--anzhiyu-theme);
  color: var(--anzhiyu-white);
  border: var(--style-border-none); /* 去掉边框 */
}

/* 背景模糊度 */
#tag #tag-cloud-list {
  backdrop-filter: saturate(180%) blur(20px); /* 背景模糊，适应整体样式 */
}



实际效果按照自己喜好调整css结构，就酱